<template>
  <div class="nav" @click="(pull = true), (vita = true)">
    <div class="nav-flx">
    <div class="boil" @click="bort=false" :class="boil ? 'isst' : ''">
      <div class="boil-alt">
        <div class="boil-tit">发沸点<span @click="bol_x">X</span></div>
        <div class="boil-d" 
        :class="bort ? 'bor-b' : ''"  
        @click.stop="bort=true"
        @input="matter">
        
        <div ref="re" 
        class="boil-put" 
        contentEditable="true" 
        placeholder="告诉你个小秘密，发布沸点时添加合适话题会被更多掘友们看见哟～">
       
       </div>
       <p>{{num}}</p>
       </div>
        <div class="boil-but">
          <span class="icon iconfont icon-caogao"> 图片
          <input type="file" class="input-img" @change="hand"> </span>
          <button :disabled="disa" @click="issue"  :class="disa ? 'but-dis' : ''"  >发布</button>
        </div>
      </div>
    </div>
    <div class="nav-n">
      <div class="nav-left">
        <img src="@/assets/img/logo/logo.png" />
        <router-link to="/" tag="span" class="juej">掘铁</router-link>
        <span :class="bul == 1 ? 'def' : ''" @click="clic(1)" >首页</span>
        <span :class="bul == 2 ? 'def' : ''" @click="clic(2)">沸点</span>
        <span :class="bul == 3 ? 'def' : ''" @click="clic(3)">小册</span>
        <span :class="bul == 4 ? 'def' : ''" @click="clic(4)">活动</span>
      </div>
      <div class="nav-right">
        <span class="inpu" :class="bor ? 'inpt' : ''"
          ><input
            v-model="inpval"
            v-bind:placeholder="plac"
            @focus="focus"
            @blur="blur"
          />
          <label
            :class="bor ? 'clo' : ''"
            class="icon iconfont icon-search"
            @click="getData"
          ></label>
        </span>
        <span class="sls">
          <div class="xie" @click="pu">写文章</div>
          <div
            class="la icon iconfont icon-xiala"
            @click.stop="pull = !pull"
          ></div>
          <div class="issue" :class="pull ? 'isst' : ''" @click="boil_pu">发布沸点</div>
        </span>

        <span class="user" v-if="getVuxToken">
          <span class="inform icon iconfont icon-tongzhi"></span>
          <span class="via" @click.stop="vita = !vita">
            <img :src="'http://api_devss.wanxikeji.cn/' + getVuexIcon" />
          </span>
        </span>

        <!-- 以上登录后状态 -->
        <span class="reg" v-else @click="login">登录</span>

        <ul class="via-ul" :class="vita ? 'isst' : ''">
          <li>
            <span class="icon iconfont icon-xie">
              <router-link to="/addit" tag="span"> 写文章</router-link>
            </span>
          </li>
          <li><span class="icon iconfont icon-caogao"> 草稿</span></li>
          <li>
            <span class="icon iconfont icon-renyuan">
              <router-link :to="'/user/'+getVuexUserID" tag="span"> 我的主页</router-link>
            </span>
          </li>
          <li><span class="icon iconfont icon-nice"> 我赞过的</span></li>
          <li><span class="icon iconfont icon-cezitubiao"> 我的小册</span></li>
          <li><span class="icon iconfont icon-shoucang"> 我的收藏集</span></li>
          <li><span class="icon iconfont icon-biaoqian"> 标签管理</span></li>
          <li></li>
          <li><span class="icon iconfont icon-yuangui"> 字学</span></li>
          <li></li>
          <li>
            <span class="icon iconfont icon-shezhi">
             <router-link to="/profile" tag="span"> 设置</router-link>
            </span>
          </li>
          <li>
            <span class="icon iconfont icon-guanyu">
              <router-link :to="'/user/'+getVuexUserID" tag="a"> 关于</router-link>
            </span>
          </li>
          <li></li>
          <li>
            <span class="icon iconfont icon-dengchu" @click="exit"> 登出</span>
          </li>
        </ul>
      </div>
    </div>
    </div>
  </div>

</template>

<script>
export default {
  props:["data"],
  data() {
    return {
      plac: "搜索掘铁",
      bor: false, //搜索框
      bul: 1, //在那一页
      pull: true, //写文章 沸点
      vita: true, //个人列表
      boil:true,
      inpval: "",
      num:1000,
      bort:false,//input框蓝色边框
      disa:true,//发布按钮样式
      boilval:"",
      info:"",
      info1:{
        "content":"",
        "imgs":[]
      },
    };
  },
  methods: {
    // 跳转到我的主页组件
    goHomePage(){
        this.$router.push({
            path:`/user/${this.$store.state.userID}`
        })
    },
    pu(){
      console.log(this.$store.state.token)
      if(this.$store.state.token==null){
        alert("请先登录哦")
      }else{
      this.$router.push('/addit')
      }
    },
     boil_pu(){
     if(this.$store.state.token==null){
        alert("请先登录哦")
      }else{
     this.boil=false
      }
    },
    focus() {
      //搜索框
      this.plac = "文章/小册/标签/用户";
      this.bor = true;
    },
    blur() {
      //搜索框
      (this.plac = "搜索掘铁"), (this.bor = false);
    },
    clic(val) {
      //在那一页
      this.bul = val;
      if(val==1){
      this.$router.push('/index')
      }else if(val==2){
      this.$router.push('/pins')
      }
    },
    // 搜索
    getData() {
      if (this.inpval != "") {
        this.axios({
          method: "post",
          url: "api/articleList",
          data: {
            page: 1,
            size: 10,
            search: this.inpval,
           
          },
        })
          .then((res) => {
            console.log(res);

            this.$emit("titchg",res.data.data.data)
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 登录
    login() {
      this.$emit("loginSwitch");
    },
    // 登出
    exit() {
      this.$store.commit("removeCookie");
      this.$router.push('/index')
    },
    // 点击页面任意位置关闭个人信息
    closePersonInfo() {
      this.vita = true;
    },
    issue(){
      this.axios({
          method: "post",
          url: "api/addModifyArticle",
          data: {
            token:this.$store.state.token,
            title: "没有标题",
            info:this.info,
            tags_name:["生活"],
            type:2
          },
        })
          .then((res) => {
            console.log(res); 
            this.boil=true, 
            this.disa=true,    
            this.$refs.re.innerText=""
            this.num=1000,
            alert("发布成功！卧龙兄，掘铁有你会变得更好")
          })
          .catch((err) => {
            
            console.log(err);
            alert("发布失败")
          });
    },
      hand(e){
     
      let file=e.target || e.srcElement;
     
      let fil=file.files[0] 
      var reader = new FileReader(); 
      reader.readAsDataURL(fil);
      let param = new FormData();
      param.append("img", fil);
     
      this.axios({
          method: "post",
          url: "api/savePic",
          data: param
        })
          .then((res) => {
            console.log(res);
            this.info1.content = this.boilval;
            this.info1.imgs.push(res.data.data)
            this.info = JSON.stringify(this.info1);
            console.log(this.info)
            // this.info=`{"content":"${this.boilval}","imgs":["${res.data.data}"]}`;
            let wu="http://api_devss.wanxikeji.cn/" + res.data.data;
           
            this.img=`<img style=" max-height: 100px;max-width: 100px;"  src="${wu}">`
            this.$refs.re.innerHTML+=this.img
            // this.mon()
          })
          .catch((err) => {
            alert("选择图片失败")
            console.log(err);
            
          });},
      matter(){
      if(this.$refs.re.innerText!=""){
        this.disa=false
        this.boilval=this.$refs.re.innerText
        this.info1.content = this.boilval;
        this.info = JSON.stringify(this.info1);
        this.num=1000 - this.$refs.re.innerText.length
        
      }else{
        this.disa=true
        this.num=1000
      }
    },
    bol_x(){
      this.disa=true
      this.boil=true,
      this.$refs.re.innerText=""
    }

  },
  computed: {
    getVuxToken() {
      return this.$store.state.token
    },
    getVuexIcon() {
      return this.$store.state.icon
    },
    getVuexUserID() {
      return this.$store.state.userID
    }
  },
  mounted() {
    window.addEventListener("click", this.closePersonInfo);
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.boil{

  position: fixed;
  z-index: 99;
  width: 100%;
  height: 100%;
 
  background-color:rgba(59, 57, 57, 0.2);
}
.boil-alt{
  margin: auto;
  margin-top:100px ;
  width: 600px;
  padding: 0 20px;
  background: white;
 
}
.boil-tit{
  text-align: center;
  line-height: 40px;
}
.boil-tit span{
  cursor: pointer;
  float:right;
}
.boil-d{
  min-height: 80px;
  border: 1px solid rgb(204, 211, 218);
  background: rgb(251, 252, 250);
   padding: 10px;
   border-radius:5px ;
}
.boil-alt .bor-b{
   border: 1px solid #027fff;

}
.boil-d p{
  width: 100%;
  text-align: right;
  color: rgb(189, 187, 187);
}
.boil-put{
  min-height: 60px;
  outline: none;
}

.boil-put:empty:before{
    content:attr(placeholder);
    font-size: 15px;
    color: rgb(189, 187, 187);
}
.boil-but{
  display: flex;
  justify-content:space-between;
}
.boil-but span:first-child{
  position: relative;
  font-size: 16px;
  color: #027fff;
  padding: 20px 0;
  width: 100px;
}

.input-img{
  position: absolute;
  width: 40px;
  left: 0px;
  top: 20px;
  opacity: 0;
}

.boil-but button{
  border: none;
  display: block;
  font-size: 16px;
  color: white;
  margin-top:10px ;
  width: 70px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  background: #027fff;
  border-radius:5px ;
  
}
.boil-but .but-dis{
  opacity: .2;
}
.reg {
  border: 1px solid #007fff;
  line-height: 35px;
  padding: 0px 20px;
  color: #007fff;
  border-radius: 5px;
}
.nav {
  width: 100%;
  height: 60px;
  background: white;

}
.nav-flx{
  width: 100%;
  height: 60px;
  background: white;
  position: fixed;
z-index: 999;
}
.nav-n {
  width: 960px;
  min-width: 960px;
  background: white;
  height: 60px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  
}

.nav-n span:hover {
  cursor: pointer;
}
.nav-n img:hover {
  cursor: pointer;
}
.nav-left {
  width: 40%;
  display: flex;
  justify-content: space-between;
}
.nav-left span {
  color: #909090;
  line-height: 60px;
  font-size: 16px;
  transition: all 0.2s;
}
.nav-left span:hover {
  color: #007fff;
}
.nav-left .def {
  color: #007fff;
}
.nav-left .juej {
  font-size: 30px;
  color: #007fff;
  font-weight: bold;
}
.nav-left img {
  transform: rotate(180deg);
}
.nav-right {
  width: 45%;
  display: flex;
  justify-content: space-between;
  position: relative;
}
.nav-right input {
  border: none;
  padding: 5px;
  padding-left: 15px;
  width: 130px;
  height: 25px;
  outline: none;
}
.inpu {
  font-size: 20px;
  font-weight: bold;
  border: 1px rgb(221, 221, 224) solid;
}
.inpt {
  border: 1px #007fff solid;
}
.nav-right label {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #909090;
}
.nav-right label.clo {
  color: #007fff;
}
.nav-right label:hover {
  cursor: pointer;
}
.nav-right > span {
  margin-top: 10px;
  height: 35px;
  display: flex;
  justify-content: space-between;
}
.nav-right .user {
  width: 100px;
}
.xie {
  color: white;
  background: #007fff;
  font-size: 15px;
  line-height: 35px;
  padding: 0px 10px;
  transition: all 0.5s;
}
.xie:hover {
  background: #036ad1;
}
.la {
  height: 35px;
  color: white;
  background: #007fff;
  margin-left: 1px;
  line-height: 35px;
  padding: 0px 3px;
  font-size: 10px;
  transition: all 0.5s;
}
.la:hover {
  background: #036ad1;
}
.sls {
  border: 1px #007fff solid;

  border-radius: 5px;
  position: relative;
}
.issue {
  position: absolute;
  background: white;
  color: #036ad1;
  width: 82px;
  height: 35px;
  top: 35px;
  font-size: 15px;
  line-height: 35px;
  text-align: center;
  border: 1px solid rgb(225, 231, 236);
  z-index: 3;
}
.isst {
  display: none;
}
.inform {
  font-size: 25px;
  line-height: 35px;

  color: rgb(100, 98, 100);
  position: relative;
}
.inform:hover {
  color: #007fff;
}
.inform::after {
  content: "1";
  background: red;
  display: inline-block;
  font-size: 14px;
  color: white;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 20px;
  position: absolute;
  left: 18px;
  border: 1px white solid;
}
.user .via {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}
.via img {
  width: 35px;
  height: 35px;
}
.via-ul {
  position: absolute;
  right: 0;
  padding: 20px;
  border: 1px solid rgb(209, 203, 203);
  top: 60px;
  background: white;
  color: rgb(131, 127, 131);
  z-index: 10;
}
.via-ul li {
  width: 120px;
  height: 30px;
  line-height: 30px;
}
.icon {
  overflow: visible;
}
</style>
